<template>
  <div class="container">
    <fast-header/>
    <div class="container-content">
      <ul class="address-ul">
        <li class="address-ul_item safe_padding"><span class="item_describe">收货人</span>
          <input type="text" placeholder="请填写收货人姓名"
                 @keydown="nameDown"
                 @blur="nameBlur"
                 @focus="nameFocus"
                 v-model="nameData">
          <span class="delete-icon" @click="nameClick" v-show="nameShow">
              <img src="../assets/icon/delete.png" alt="">
            </span>
        </li>
        <li class="address-ul_item safe_padding">
          <span class="item_describe">手机号码</span>
          <input class="delete-auth" type="text"
                 @keydown="phoneDown"
                 @blur="phoneBlur"
                 @focus="phoneFocus"
                 v-model="phoneData"
                 placeholder="请输入手机号">
          <span class="delete-icon" @click="phoneClick" v-show="phoneShow">
              <img src="../assets/icon/delete.png" alt="">
            </span>
        </li>
        <li class="address-ul_item safe_padding" @click="Address_item">
          <span class="item_describe">所在区域</span>
          <p class="address_describe">请选择</p>
        </li>
        <li class="address-ul_address safe_padding"><span>详细地址</span>
          <input type="text" placeholder="街道楼号"
                 @keydown="addressDown"
                 @blur="addressBlur"
                 @focus="addressFocus"
                 v-model="addressData">
          <span class="delete-icons" @click="addressdelete" v-show="addressShow">
              <img src="../assets/icon/delete.png" alt="">
            </span>
        </li>
      </ul>
      <div class="register--button">
        <button class="button" @click="Address">保存</button>
      </div>
    </div>
    <div class="mask" ref="mask">
      <div class="mask-content">
        <ol>
          <li class="mask_title"><span class="region_span"></span>
            <span class="region_span ">所在地区</span>
            <p @click="off_mask">关闭</p>
          </li>
          <li class="mask_City safe_padding">
            <span class="font-indent">{{this.Province.name}}</span>
            <span class="font-indent">{{this.city.name}}</span>

            <span class="border_bottom_border font-indent">{{this.area.name? this.area.name:this.area='请选择'}}</span>
          </li>
        </ol>
        <div class="address_betterscroll">
          <ul class="mask_City_ul">
            <li class="mask_City_check " v-for="(item, key) in dataCity" @click="nextcity(key)" :key="key">
              <p class="City_name safe_padding">{{item.name}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <popupdialog v-if="dialog"></popupdialog>
  </div>
</template>
<script>
  import popupdialog from '@cpt/Popupdialog';
  /*import Betterscroll from '@pcpt/better-scroll/better-scroll';*/
  import fastHeader from '@pcpt/fast-header';

  export default {
    name: "addAddress",
    components: {fastHeader, popupdialog},
    data() {
      return {
        //地址集合
        dataCity: '',
        ProvinceFlag: false,
        Province: '',  //省（直辖市）
        cityFlag: false,
        city: '',  //市（市辖区）
        areaFlag: false,
        area: '',  // 区（县）
        phoneShow: false,
        // codeShow: false,
        addressShow: false,
        nameShow: false,
        // 双向绑定
        phoneData: '',
        addressData: '',
        nameData: '',
        dialog: false
      }
    },
    methods: {
      //弹出地址栏
      Address_item() {
        this.$refs.mask.style.display = 'block';
        this.$api.region()
          .then((data) => {
              if (data.data.code === 1) {
                this.dataCity = data.data.data;
              }
            }
          )
          .catch(error => console.log(error));
      },
      //新增地址
      nextcity(key) {
        if (Object.keys(this.dataCity[key]).length === 3) {
          if (this.Province === '' || this.ProvinceFlag === true) {
            this.Province = this.dataCity[key];
            this.ProvinceFlag = false;
            console.log('第一次');
          } else if (this.city === '' || this.cityFlag === true) {
            this.city = this.dataCity[key];
            this.ProvinceFlag = false;
            this.cityFlag = true;
            console.log('第二次');
          }
          this.dataCity = this.dataCity[key].pchilds || this.dataCity[key].cchilds;
        } else if (Object.keys(this.dataCity[key]).length === 2) {
          this.area = this.dataCity[key];
          this.ProvinceFlag = true;
          this.cityFlag = true;
          this.$refs.mask.style.display = 'none';
        }

        // console.log(this.dataCity[key].pchilds.length);
        // console.log(this.dataCity[key].cchilds);
        // if(Object.keys(this.dataCity[key]).length===2){
        //   this.$refs.mask.style.display= 'none';
        // }else if(this.dataCity[key].pchilds){
        //    this.Province = this.dataCity[key]
        // }
        // this.dataCity = this.dataCity[key].pchilds || this.dataCity[key].cchilds;
        // if(this.dataCity===''){
        //
        // }
      },
      Address() {
        this.dialog = true;
      },
      // 弹出提示框
      /* maskRegister(){
         this.$popUp({
           message: "正在加载中"
         });
       },*/
      off_mask() {
        this.ProvinceFlag = true;
        this.cityFlag = true;
        this.$refs.mask.style.display = 'none';
      },
      // 键盘事件
      phoneDown() {
        this.phoneShow = true;
        if (this.phoneData === '') {
          this.phoneShow = false;
        }
        this.phoneShow = true;
      },
      nameDown() {
        this.nameShow = true;
        if (this.nameData === '') {
          this.nameShow = false;
        }
        this.nameShow = true;
      },
      addressDown() {
        this.addressShow = true;
        if (this.AddressData === '') {
          this.addressShow = false;
        }
        this.addressShow = true;
      },
      // 失焦事件
      phoneBlur() {
        this.phoneShow = false;
      },
      nameBlur() {
        this.nameShow = false;
      },
      addressBlur() {
        this.addressShow = false;
      },
      // 聚焦事件
      phoneFocus() {
        /* console.log(this.phoneData.length);*/
        if (this.phoneData.length > 0) {
          this.phoneShow = true;
        } else {
          this.phoneShow = false;
        }
      },
      nameFocus() {
        if (this.nameData.length > 0) {
          this.nameShow = true;
        } else {
          this.nameShow = false;
        }
      },
      addressFocus() {
        if (this.addressData.length > 0) {
          this.addressShow = true;
        } else {
          this.addressShow = false;
        }
      },
      // 图标全部清除
      phoneClick() {
        this.phoneData = '';
      },
      nameClick() {
        this.nameData = '';
      },
      addressdelete() {
        this.addressData = '';
      }
    },
    mounted: function () {
      this.scroller = new this.$BS('.address_betterscroll', {
        scrollX: false,
        scrollY: true,
        click: true,
      });
    }
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    width: 100vw;
    height: 100vh;
    background: #fff;
    overflow: hidden;
  }

  .address_betterscroll {
    width: 100vw;
    overflow: hidden;
    position: relative;
    height: 8.85rem;
  }

  .mask_City_ul {
    width: 100vw;
  }

  .container-content {
    border-top: 1px solid #b2b2b2;
  }

  .address-ul {
    display: block;
    padding-top: .18666rem;
    font-weight: 400;
  }

  .address-ul_item {
    position: relative;
    display: block;
    height: 1.2rem;
  }

  .item_describe {
    display: inline-block;
    width: 1.8rem;
    line-height: 1.18rem;
    font-size: .4rem;
    color: #333;
  }

  .address_describe {
    display: inline-block;
    font-size: .4rem;
    line-height: 1.18rem;
    color: #c8c8cb;
    text-indent: 1.13rem;
  }

  .address-ul_item input {
    padding-left: 1.13rem;
    outline: none;
    font-size: .37333rem;
    color: #c8c8cb;
    border: none;
    /* padding-right: .42666rem;*/
  }

  .address-ul_address {
    padding-left: .32rem;
    padding-right: .32rem;
    height: 2.053rem;
    position: relative;
  }

  .address-ul_address input {
    font-size: .4rem;
    color: #c8c8cb;
    outline: none;
    border: none;
    width: 7rem;
    line-height: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .address-ul_item::after {
    content: '';
    display: block;
    border-bottom: 1px solid #c8c8cb;
  }

  .mask_title::after {
    content: '';
    display: block;
    border-bottom: 1px solid #c8c8cb;
  }

  .address-ul_address::after {
    content: '';
    display: block;
    border-bottom: 1px solid #c8c8cb;
  }

  .address-ul_address span {
    display: block;
    width: 1.8rem;
    line-height: 1.053rem;
    font-size: .4rem;
    color: #333;
  }

  .register--button {
    text-align: center;
    left: 0;
    right: 0;
    margin-top: 1.1333rem;
  }

  .register--button > button {
    width: 6.88rem;
    line-height: 1.1733rem;
    color: white;
    background: #3c9dfc;
    font-size: .4rem;
    border-radius: .5rem;
    outline: none;
    border: none;
  }

  .delete-icon img {
    display: inline-block;
    vertical-align: middle;
    width: .65333rem;
    height: .6rem;
  }

  .delete-icon {
    position: absolute;
    display: inline-block;
    line-height: 1.18rem;
    right: .8rem;
  }

  .delete-icons {
    display: inline-block;
    float: right;
    text-align: right;
  }

  .delete-icons img {
    display: inline-block;
    vertical-align: middle;
    width: .65333rem;
    height: .6rem;
    margin-right: .5rem;
  }

  .mask {
    top: 0;
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 10;
    color: #000;
    background: rgba(76, 76, 76, .7);
    display: none;
  }

  .mask-content {
    position: absolute;
    width: 100vw;
    height: 11.25rem;
    background: #fff;
    bottom: 0;

  }

  .mask-content ol > li {
    display: block;
    width: 100vw;
    height: 1.2rem;
    line-height: 1.2rem;
    box-sizing: border-box;
  }

  .region_span {
    display: inline-block;
    width: 33.3%;
    font-size: .46875rem;
    color: #333;
    text-align: center;
  }

  .mask-content ol > li > p {
    font-size: .46875rem;
    display: inline-block;
    float: right;
    padding-right: .5625rem;
    box-sizing: border-box;
  }

  .mask_City {
    box-sizing: border-box;
    /* border-bottom: 1px solid #c8c8cb;*/
    height: 1rem;
    font-size: .4rem;
  }

  .safe_padding {
    padding-left: .32rem;
    padding-right: .32rem;
  }

  .mask_City_check::after {
    content: '';
    display: block;
    height: 1px;
    border-bottom: 1px solid #c8c8cb;
  }

  .mask_City_check {
    position: relative;
    font-size: .4rem;
    color: #6a6a6a;
    line-height: 1rem;
  }

  .City_name {
    line-height: 1rem;
  }

  .border_bottom_border {
    box-sizing: border-box;
    display: inline-block;
    height: 1rem;
    line-height: 1rem;
    color: #539eda;
    border-bottom: 2px solid #539eda;
  }
</style>
